
<table id="dataTable"></table>

<script type="text/html" id="toolbar">
    <div class="layui-btn-group fl">
        <a href="{:url('add')}" class="layui-btn layui-btn-primary layui-btn-sm layui-icon layui-icon-add-circle-fine hisi-iframe" hisi-data="{width: '600px', height: '600px'}" title="添加">&nbsp;添加</a>
    </div>
</script>
<script type="text/html" title="排序模板" id="sortTpl">
    <input type="text" class="layui-input hisi-ajax-input input-sort" onkeyup="value=value.replace(/[^\d]/g,'')" value="{{ d.sort }}" data-value="{{ d.id }}" data-href="{:url('sort')}?id={{ d.id }}">
</script>
<script type="text/html" title="操作按钮模板" id="buttonTpl">
    <a href="{:url('edit')}?id={{ d.id }}" class="layui-btn layui-btn-xs layui-btn-normal hisi-iframe" hisi-data="{width: '470px', height: '400px'}" title="修改">修改</a>
    <!-- <a href="{:url('delUser')}?id={{ d.id }}" class="layui-btn layui-btn-xs layui-btn-danger j-tr-del">删除</a> -->
</script>
<script type="text/html" id="imgTpl">
    <img src="{{ d.img }}" alt="" class="img">
</script>

{include file="system@block/layui" /}
<script type="text/javascript">

    layui.use(['table','jquery'], function() {
        var table = layui.table;
        var $ = layui.jquery;
        table.render({
            elem: '#dataTable'
            ,url: '{:url()}' //数据接口
            ,page: true //开启分页
            ,limit: 20
            ,skin: 'row'
            ,even: true
            ,text: {
                none : '暂无相关数据'
            }
            ,toolbar: '#toolbar'
            ,defaultToolbar: ['filter']
            ,cols: [[ //表头
                {type:'checkbox'}
                ,{field: 'name', title: '分类名称'}
                ,{field: 'img', title: '分类图片',templet:function(d){
                    return '<div onclick="show_img(this)" ><img src="'+d.img+'" alt="" width="50px" height="50px"></a></div>';
                }}
                ,{field: 'sort', title: '排序',templet:'#sortTpl'}
                ,{title: '操作', templet: '#buttonTpl', width:110}
            ]]
        });

    });
            //显示大图片
        function show_img(t) {
            var t = $(t).find("img");
            //页面层
            layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                 area: ['80%', '80%'], //宽高
                shadeClose: true, //开启遮罩关闭
                end: function (index, layero) {
                    return false;
                },
                content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
            });
        }
</script>